<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>JHipster presentation slides</title>

        <meta name="description" content="Hipster stack for Java developers. Yeoman + Spring + AngularJS in one handy generator.">
        <meta name="author" content="Julien Dubois">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/reveal.min.css">
        <link rel="stylesheet" href="css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <!-- If the query includes 'print-pdf', use the PDF print sheet -->
        <script>
            document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">

                <section>
                    <h2>Welcome, Java Hipster</h2>
                    <img src="images/logo-jhipster-drink-coffee.png" class="jhipster-logo"/>
                    <h3>Yeoman + Spring + AngularJS in one handy generator</h3>
                    <p>
                        <a href="http://jhipster.github.io">http://jhipster.github.io</a>
                    </p>
                    <p>
                        Press the right arrow to continue &gt;
                    </p>
                </section>

                <section data-background="#4d7e65" data-background-transition="slide">
                    <h1>About this presentation</h1>
                    <ul>
                        <li>Hit the left/right arrow to browse to the main sections</li>
                        <li>Hit the up/down arrow to see the slides in each section</li>
                        <li>Hit the "escape" key to see all the slides</li>
                    </ul>
                </section>

                <section>
                    <section data-background="#4d7e65" data-background-transition="slide">
                        <h1>What is this all about?</h1>
                        <h3>Modern Web application development</h3>
                    </section>
                    <section>
                        <h2>Modern Web apps</h2>
                        <p>End-users requirements have evolved. People are tired of slow, unreactive Web sites. They want:</p>
                        <ul>
                            <li>Beautiful design</li>
                            <li>Stop waiting for pages to load</li>
                            <li>Dynamic updates of page fragments</li>
                        </ul>
                        <hr/>
                        <h3><i>We need to use the latest HTML5/CSS3/JavaScript technologies</i></h3>
                    </section>
                    <section>
                        <h2>Developer productivity</h2>
                        <p>Those websites should be delivered <i>fast</i>.</p>
                        <p>Waiting 1 minute for your application to "deploy" is not acceptable anymore</p>
                        <hr/>
                        <h3><i>We need the right tools for this job!</i></h3>
                    </section>
                    <section>
                        <h2>Production-ready software</h2>
                        <p>Modern websites should be able to handle <i>huge</i> numbers of concurrent users</p>
                        <p>All using massive RESTful applications, which will hit your back-end servers <b>hard</b></p>
                        <hr/>
                        <h3><i>We need robust, scalable high-performance servers</i></h3>
                    </section>
                    <section>
                        <h3><i>Our goal is to solve those issues</i></h3>
                        <hr/>
                        <ul>
                            <li>A beautiful front-end, with the latest HTML5/CSS3/JavaScript frameworks</li>
                            <li>A robust and high-quality back-end, with the latest Java/Caching/Data access technologies</li>
                            <li>All automatically wired up, with security and performance in mind</li>
                            <li>And great developer tooling, for maximum productivity</li>
                        </ul>
                    </section>
                </section>

                <section>
                    <section data-background="#4d7e65" data-background-transition="slide">
                        <h1>Client-side technologies</h1>
                        <h3>Yeoman, Gulp, Bower, AngularJS, Bootstrap</h3>
                    </section>
                    <section>
                        <h1>Yeoman</h1>
                        <h3>Yeoman provides application <i>generators</i></h3>
                        <ul>
                            <li>Hundreds of generators are available</li>
                            <li>Mostly geared toward JavaScript front-end applications</li>
                            <li>The top-rated generators have excellent quality</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>yo jhipster</code>
                        </pre>
                    </section>
                    <section>
                        <h1>Gulp</h1>
                        <h3>Gulp is a JavaScript task runner</h3>
                        <ul>
                            <li>For development, it will allow you to have "live editing" of your code, run your tests in the background...</li>
                            <li>For production, it will compress and optimize all your resources, compile your Sass code...</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>gulp test</code>
                        </pre>
                    </section>
                    <section>
                        <h1>Bower</h1>
                        <h3>Bower is a package manager for your JavaScript assets</h3>
                        <ul>
                            <li>You can search, install and update your JavaScript libraries</li>
                            <li>It provides a <i>huge</i> number of libraries</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>bower install angular</code>
                        </pre>
                    </section>
                    <section>
                        <h1>Karma</h1>
                        <h3>Karma runs unit tests on your JavaScript code</h3>
                        <ul>
                            <li>It works with <i>Phantom.js</i>, a headless browser</li>
                            <li>It is <i>very</i> fast, and can run continously in the background</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>karma start src/test/javascript/karma.conf.js</code>
                        </pre>
                    </section>
                    <section>
                        <h1>AngularJS</h1>
                        <h3>The most popular JavaScript framework</h3>
                        <ul>
                            <li>Powerful &amp; easy to learn</li>
                            <li>Data binding, form validation, i18n... all out of the box</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Twitter Bootstrap</h1>
                        <h3>Great CSS/JavaScript framework for responsive Web apps</h3>
                        <ul>
                            <li>CSS and HTML elements for all common usages</li>
                            <li>Tons of JavaScript components: menus, navbars, drop-down boxes, alerts...</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
<div class="alert alert-success">
    <strong>Hello, world!</strong>
</div>
                            </code>
                        </pre>
                    </section>
                </section>

                <section>
                    <section data-background="#4d7e65" data-background-transition="slide">
                        <h1>Server-side technologies</h1>
                        <h3>Maven, Spring, Spring MVC REST, Spring Data JPA, Netflix OSS</h3>
                    </section>
                    <section>
                        <h1>Maven | Gradle</h1>
                        <h3>The most popular Java build tools</h3>
                        <ul>
                            <li>Well-known, pre-defined directories and goals</li>
                            <li>Integration with major IDEs</li>
                            <li>Great plugin ecosystem, including Spring Boot and Yeoman</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
./mvnw spring-boot:run
                            </code>
                            <code data-trim contenteditable>
./gradlew bootRun
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Spring Boot</h1>
                        <h3>Spring is the de-facto standard for Java apps</h3>
                        <ul>
                            <li>IoC, AOP and abstractions to ease application coding</li>
                            <li>Fast and lightweight, and extremely powerful <i>when needed</i></li>
                            <li>Out-of-the-box configuration by Spring Boot</li>
                            <li>Live reload of application</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
@Service
@Transactional
public class UserService {

    @Inject
    private UserRepository userRepository;

}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Netflix OSS</h1>
                        <h3>Netflix OSS provides great tools and frameworks for microservices</h3>
                        <ul>
                            <li>Eureka - Service registry for load balancing and failover.</li>
                            <li>Zuul - Proxy for dynamic routing, monitoring and security</li>
                            <li>Ribbon - software load balancing for services</li>
                        </ul>
                    </section>
                    <section>
                        <h1>Liquibase</h1>
                        <h3>Database updates made easy</h3>
                        <ul>
                            <li>Handles updating a database schema</li>
                            <li>Works great with Spring and JPA</li>
                            <li>Needs a good understanding of databases and ORM</li>
                        </ul>
                    </section>
                    <section>
                        <h1>JPA</h1>
                        <h3>The standard ORM solution for Java</h3>
                        <ul>
                            <li>Hibernate is used underneath</li>
                            <li>Very complete, impressive set of features</li>
                            <li>Still complex to understand for newbies!</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
@Entity
public class User implements Serializable {

    @Id
    private String login;

}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Spring Data JPA</h1>
                        <h3>Adds extra syntaxic sugar on top of JPA</h3>
                        <ul>
                            <li>Generates your JPA repositories <i>automatically</i></li>
                            <li>Removes a lot of boilerplate code</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
public interface PersistenceAuditEventRepository extends JpaRepository&lt;PersistentAuditEvent, String&gt; {

    List&lt;PersistentAuditEvent&gt;
        findByPrincipalAndAuditEventDateGreaterThan(String principal, LocalDateTime after);

}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>MongoDB</h1>
                        <h3>NoSQL for scalability</h3>
                        <ul>
                            <li>Alternative to the SQL database and JPA choice</li>
                            <li>Similar code: Spring Data MongoDB works the same as Spring Data JPA</li>
                            <li>More scalable, easier to use</li>
                        </ul>
                    </section>
                    <section>
                        <h1>Cassandra</h1>
                        <h3>NoSQL for scalability</h3>
                        <ul>
                            <li>2nd alternative to the SQL database and JPA choice</li>
                            <li>Linear scalability and high availability</li>
                            <li>Extreme performance and low latency for mission-critical apps</li>
                        </ul>
                    </section>
                    <section>
                        <h1>Caching</h1>
                        <h3>Caching is king for performance</h3>
                        <ul>
                            <li>Ehcache is the most widely used solution</li>
                            <li>HazelCast is a great alternative, with clustering support!</li>
                            <li>Hibernate 2nd level cache or Spring Caching abstraction</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
@Entity
@Cache(usage = CacheConcurrencyStrategy.NONSTRICT_READ_WRITE)
public class User implements Serializable {

}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Spring Security</h1>
                        <h3>Bulletproof Security framework</h3>
                        <ul>
                            <li>Leading tool, widely used across all industries</li>
                            <li>Secures URLs and Java code (Spring Beans)</li>
                            <li>Works both with stateful (cookies) and stateless (OAuth2/JWT) Web application architectures</li>
                        </ul>
                    </section>
                    <section>
                        <h1>Spring MVC REST</h1>
                        <h3>The best REST framework in Java</h3>
                        <ul>
                            <li>Complete, high-performance REST solution</li>
                            <li>Great Spring support, great testing support</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
@RestController
public class AccountResource {
    @RequestMapping(value = "/app/rest/account",
            method = RequestMethod.POST)
    public void saveAccount(@RequestBody UserDTO userDTO) {
        userService.updateUserInformation(userDTO);
    }
}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Thymeleaf</h1>
                        <h3>Server-side templates</h3>
                        <ul>
                            <li>Used when a Single Web Page application isn't enough</li>
                            <li>Replaces JSPs and JSTLs, which are outdated and deprecated</li>
                            <li>Great templates for Web designers</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
<h1 th:text="#{title}">Hello, world</h1>
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Monitoring</h1>
                        <h3>Ready for production with Metrics</h3>
                        <ul>
                            <li>Monitors the JVM, app server, Spring beans, cache, and more!</li>
                            <li>JMX or Graphite reporting</li>
                        </ul>
                        <pre>
                            <code data-trim contenteditable>
@Timed
public void saveAccount(@RequestBody UserDTO userDTO) {
    userService.updateUserInformation(userDTO);
}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Cloud deployment</h1>
                        <h3>To the cloud and beyond!</h3>
                        <ul>
                            <li>Deployments should be easy on-premise and in the cloud</li>
                            <li>Leading cloud providers like Cloud Foundry, Heroku and Amazon Web Services all provide specific tooling and deployment options</li>
                        </ul>
                    </section>

                </section>

                <section>
                    <section data-background="#4d7e65" data-background-transition="slide">
                        <h1>Meet JHipster</h1>
                        <h3>Why all the hype?</h3>
                    </section>
                    <section>
                        <h3>You said <i>hype</i>?</h3>
                        <hr/>
                        <p>At the time of this writing (May, 2016), JHipster has:</p>
                        <ul>
                            <li>223 contributors, including 13 core members</li>
                            <li>4,210 GitHub stars and 928 forks</li>
                            <li>220,000 installations</li>
                            <li>And it's growing rapidly</li>
                        </ul>
                        <hr/>
                        <h3>Why?</h3>
                    </section>
                    <section>
                        <h3>We've seen lots of cool technologies</h3>
                        <ul>
                            <li>Can Gulp and Maven be friends?</li>
                            <li>Can AngularJS and Spring MVC REST be friends?</li>
                            <li>Can Netflix OSS and Spring be friends?</li>
                            <li>We can <i>guarantee</i> you that having everything working together smoothly, with security, caching and monitoring, isn't easy...</li>
                        </ul>
                    </section>
                    <section>
                        <h3>JHipster makes everything just work together</h3>
                        <ul>
                            <li>JHipster creates a complete working application, with all those technologies</li>
                            <li>Everthing just works out-of-the-box</li>
                            <li>You have your Gulp workflow working great with your Maven goals!</li>
                            <li>You have Docker configuration to run everything smoothly!</li>
                        </ul>
                    </section>
                    <section>
                        <h3>But wait, there's more!</h3>
                        <ul>
                            <li><strong>"entity"</strong> sub-generator to generate a complete JPA entity, from database to AngularJS</li>
                            <li><strong>"import-jdl"</strong> sub-generator to generate a complex entity model using <a href="https://jhipster.github.io/jdl-studio/" target="_blank">JDL Studio</a></li>
                            <li><strong>"service"</strong> sub-generator to generate a Spring business service</li>
                            <li><strong>"languages"</strong> sub-generator to add languages for i18n</li>
                            <li>Great support for Spring Security: Ajax endpoints, secured remember-me, audits...</li>
                            <li>Great monitoring screen using Metrics</li>
                        </ul>
                    </section>
                    <section>
                        <h3>That's not over yet, there's even more!</h3>
                        <ul>
                            <li>Great support for creating microservices and gateways</li>
                            <li>JHipster Registry (Netflix Eureka + Spring cloud config server) provided out of the box</li>
                            <li>JHipster Console with ELK (Elasticsearch + Logstash + Kibana) monitoring out of the box</li>
                            <li>Great support for Docker</li>
                            <li>Additional JHipster <a href="https://jhipster.github.io/modules/marketplace/" target="_blank">Modules</a> to add more features</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Production-ready</h3>
                        <ul>
                            <li>Specific Spring profile with GZipping and HTTP caching headers</li>
                            <li>JavaScript &amp; CSS optimization and minification by Gulp</li>
                            <li>Executable or standard WAR file, with monitoring enabled</li>
                            <li>Sub-generators for deploying automatically to Cloud Foundry, Heroku and AWS</li>
                            <li><strong>"docker-compose"</strong> sub-generator to generate Docker configurations for deploying microservices to production</li>
                        </ul>
                    </section>
                </section>

                <section>
                    <section data-background="#4d7e65" data-background-transition="slide">
                        <h1>Let's build our first app</h1>
                        <h3>10 minutes tutorial</h3>
                    </section>
                    <section>
                        <h1>Install Yeoman</h1>
                        <pre>
                            <code data-trim contenteditable>
npm install -g yo
npm install -g generator-jhipster
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Create an application</h1>
                        <p>And use the embedded Maven wrapper to run it<br>
                            <i>(hot reload of your application will work automatically)</i>
                        </p>
                        <pre>
                            <code data-trim contenteditable>
yo jhipster
./mvnw
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Client-side live reload</h1>
                        <p>
                            Live reload of your client-side code (HTML, CSS, JavaScript) works thanks to Gulp and Browsersync. Edit any file and your browser will refresh automatically:
                      </p>
                        <pre>
                            <code data-trim contenteditable>
gulp
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h1>Add an entity</h1>
                        <pre>
                            <code data-trim contenteditable>
yo jhipster:entity Foo
                            </code>
                        </pre>
                    </section>

                    <section>
                        <h1>Run in production</h1>
                        <p><i>(Using Docker to run the database)</i></p>
                        <pre>
                            <code data-trim contenteditable>
./mvnw -Pprod package
docker-compose -f src/main/docker/mysql.yml up -d
java -jar target/*.war --spring.profiles.active=prod
                            </code>
                        </pre>

                    </section>
                </section>

                <section>
                    <h1>Thank you for your attention</h1>
                    <p>
                        <a href="http://jhipster.github.io">http://jhipster.github.io</a>
                    </p>
                </section>

            </div>

        </div>

        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.min.js"></script>

        <script>

            // Full list of configuration options available here:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,

                theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
                transition: Reveal.getQueryHash().transition || 'concave', // default/cube/page/concave/zoom/linear/fade/none

                // Parallax scrolling
                // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
                // parallaxBackgroundSize: '2100px 900px',

                // Optional libraries used to extend on reveal.js
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                ]
            });

        </script>

            <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46075199-1', 'jhipster.github.io');
  ga('send', 'pageview');

        </script>

    </body>
</html>
